<template lang="pug">
.survey
  .survey-title 杰恩设计--供应商综合能力调查表
  .survey-container
    .survey-form-title 供应商综合能力调查
    el-form(:model="form" :rules="rules" ref="ruleForm" label-width="290px" class="demo-ruleForm" size="small")
      .form-section
        .form-section-title 供应商（制造商）概况
        .form-section-container
            el-form-item(label="您的公司全称：" prop="companyName")
              el-input(placeholder="请输入你公司全称" v-model="form.companyName")
            el-form-item(label="您公司的详细地址：" prop="companyAddress")
              .form-item-flex
                .form-item-address
                  el-select(placeholder="请选择省" v-model="form.province" @change="changeAddress('province', 'cityDrop', $event)")
                    el-option(v-for="item in provinceDrop" :key="item.id" :value="item.id" :label="item.name")
                .form-item-address
                  el-select(placeholder="请选择市" v-model="form.city" no-data-text="请先选择省" @change="changeAddress('city', 'areaDrop', $event)")
                    el-option(v-for="item in cityDrop" :key="item.id" :value="item.id" :label="item.name")
                .form-item-address
                  el-select(placeholder="请选择区" v-model="form.area" no-data-text="请先选择市" @change="changeAddress('area', '', $event)")
                    el-option(v-for="item in areaDrop" :key="item.id" :value="item.id" :label="item.name")
                .form-item-address_input
                  el-input(placeholder="请输入您的公司详细地址" v-model="form.detailAddress")
            .form-row
              .form-col
                el-form-item(label="您的公司电话：" prop="mobile")
                  el-input(placeholder="请输入您的公司电话" v-model="form.mobile")
              .form-col
                el-form-item(label="您的公司电子邮箱：" prop="companyMail")
                  el-input(placeholder="请输入您的公司电子邮箱" v-model="form.companyMail")
            el-form-item(label="您的公司网址：" prop="companyUrl")
              el-input(placeholder="请输入你的公司网址" v-model="form.companyUrl")
            .form-row
              .form-col
                el-form-item(label="您的企业负责人：" prop="personsInChargeOfCompany")
                  el-input(placeholder="请输入您的企业负责人" v-model="form.personsInChargeOfCompany")
                el-form-item(label="销售负责人（区域总监/销售经理）：" prop="saleInChargeOfCompany")
                  el-input(placeholder="请输入销售负责人（区域总监/销售经理）" v-model="form.saleInChargeOfCompany")
                el-form-item(label="质量负责人：")
                  el-input(placeholder="请输入质量负责人" v-model="form.qualityInChargeOfCompany")
                el-form-item(label="业务联系人：" prop="headOfSales")
                  el-input(placeholder="请输入业务联系人" v-model="form.headOfSales")
                el-form-item(label="注册资金：" prop="registeredFund")
                  el-input(placeholder="请输入您的注册资金" v-model="form.registeredFund" type="number")
                    .form-item-input_ft(slot="suffix") 万元
                el-form-item(label="是否为一般纳税人（单选） ：" prop="generalTaxpayer")
                  el-radio-group(v-model="form.generalTaxpayer")
                    el-radio(v-for="item in dropDwon.generalTaxpayerList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
              .form-col
                el-form-item(label="您的企业负责人电话：" prop="personsInChargeOfCompanyPhone")
                  el-input(placeholder="请输入您的企业负责人电话" v-model="form.personsInChargeOfCompanyPhone")
                el-form-item(label="销售负责人（区域总监/销售经理）电话：" prop="saleInChargeOfCompanyPhone")
                  el-input(placeholder="请输入销售负责人的电话" v-model="form.saleInChargeOfCompanyPhone")
                el-form-item(label="质量负责人电话：")
                  el-input(placeholder="请输入质量负责人的电话" v-model="form.qualityInChargeOfCompanyPhone")
                el-form-item(label="业务联系人电话：" prop="headOfSalesPhone")
                  el-input(placeholder="请输入业务联系人的电话" v-model="form.headOfSalesPhone")
                el-form-item(label="成立年月：" prop="companyCreateDate")
                  el-date-picker(placeholder="请选择您的公司成立年月" type="month" value-format="yyyy-MM" v-model="form.companyCreateDate")
                el-form-item(label="是否需要开票（单选）：" prop="needBilling")
                  el-radio-group(v-model="form.needBilling")
                    el-radio(v-for="item in dropDwon.needBillingList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
              .form-col
                el-form-item(label="您的企业负责人邮箱：" prop="personsInChargeOfCompanyMail")
                  el-input(placeholder="请输入您的企业负责人邮箱" v-model="form.personsInChargeOfCompanyMail")
                el-form-item(label="销售负责人（区域总监/销售经理）邮箱：" prop="saleInChargeOfCompanyMail")
                  el-input(placeholder="请输入销售负责人的邮箱" v-model="form.saleInChargeOfCompanyMail")
                el-form-item(label="质量负责人邮箱：")
                  el-input(placeholder="请输入质量负责人的邮箱" v-model="form.qualityInChargeOfCompanyMail")
                el-form-item(label="业务联系人邮箱：" prop="headOfSalesMail")
                  el-input(placeholder="请输入业务联系人的邮箱" v-model="form.headOfSalesMail")
                el-form-item(label="企业性质：" prop="companyType")
                  el-select(placeholder="请选择您的企业性质" v-model="form.companyType")
                    el-option(v-for="item in dropDwon.companyTypeList" :key="item.dicTypeValueId" :value="item.dicTypeValueId" :label="item.dicTypeValue")
      .form-section
        .form-section-title 供应商产品销售情况
        .form-section-container
          el-form-item(label="经营的产品品牌：" prop="supplierBrand")
            el-input(type="textarea" placeholder="请输入经营的产品品牌" v-model="form.supplierBrand" maxlength="100" show-word-limit)
          el-form-item(label="主营产品介绍：" prop="productIntroduce")
            el-input(type="textarea" placeholder="请输入主营产品介绍" v-model="form.productIntroduce" maxlength="1000" show-word-limit)
          el-form-item(label="请上传产品手册：" prop="productManualList")
            .el-form-body
              .el-form-upload
                ali-upload(@getProgress="getProgress($event, 'manualFileList')" @getFileInfo="getFileInfo($event, 'productManualList')" multiple accept=".doc,.docx,.pdf" :fileAgain="fileAgain" @getAgainProgress="getAgainProgress($event, 'manualFileList')")
                  el-button(name="pink") 选择附件
              .upload-info 支持格式： .doc .docx .pdf
              .file-item(v-for="item in manualFileList" :class="{ 'active': item.progress == 100 }")
                .file-item-name
                  .file-item-progress_line(:style="{ 'width': `${item.progress}%` }" v-if="item.progress < 100")
                  .iconfont.el-icon-document
                  span {{item.fileName}}
                .file-item-handles
                  .file-item-progress(v-if="item.progress < 100 && item.isSuccess != 2") {{item.progress}}
                  i.iconfont.el-icon-refresh-right(v-if="item.isSuccess == 2" @click="again(item)")
                  i.iconfont.el-icon-close(v-if="item.isSuccess == 2 || item.progress == 100" @click="deleteFile(item, 'manualFileList', 'productManualList')")
          el-form-item(label="产品定位：" prop="productPositioning")
            el-checkbox-group(v-model="form.productPositioning")
              el-checkbox(v-for="item in dropDwon.productPositioningList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
          .form-row
            .form-col
              el-form-item(label="企业年销售额：" prop="productTotalSale")
                el-input(placeholder="请输入您的企业年销售额" v-model="form.productTotalSale" type="number")
                  .form-item-input_ft(slot="suffix") 万元
            .form-col
              el-form-item(label="业务覆盖范围：" prop="businessCoverage")
                el-input(placeholder="请输入业务覆盖范围" v-model="form.businessCoverage")
          el-form-item(label="是否进入深圳市建筑工务署（单选）：" prop="inDepartment")
            el-radio-group(v-model="form.inDepartment")
              el-radio(v-for="item in dropDwon.inDepartmentList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
          el-form-item(label="所在甲方品牌库：" prop="partyABrand")
            el-input(
              v-model="partyABrand"
              ref="saveTagInput"
              placeholder="请输入所在甲方品牌库名称,输入完成按回车键添加"
              @keyup.enter.native="handleInputConfirm('partyABrand')"
              @blur="handleInputConfirm('partyABrand')"
            )
            .form-item-tags
              el-tag(:key="index" v-for="tag, index in form.partyABrand" closable :disable-transitions="false" @close="handleClose(index, 'partyABrand')") {{tag}}
          el-form-item(label="所在甲方战采（集采）库：" prop="partyACollection")
            el-input(
              v-model="partyACollection"
              ref="saveTagInput"
              placeholder="请输入所在甲方战采（集采）库，输入完成按回车键添加"
              @keyup.enter.native="handleInputConfirm('partyACollection')"
              @blur="handleInputConfirm('partyACollection')"
            )
            .form-item-tags
              el-tag(:key="index" v-for="tag, index in form.partyACollection" closable :disable-transitions="false" @close="handleClose(index, 'partyACollection')") {{tag}}
          el-form-item(label="所在施工单位品牌库：" prop="constructionBrand")
            el-input(
              v-model="constructionBrand"
              ref="saveTagInput"
              placeholder="请输入所在施工单位品牌库名称，输入完成按回车键添加"
              @keyup.enter.native="handleInputConfirm('constructionBrand')"
              @blur="handleInputConfirm('constructionBrand')"
            )
            .form-item-tags
              el-tag(:key="index" v-for="tag, index in form.constructionBrand" closable :disable-transitions="false" @close="handleClose(index, 'constructionBrand')") {{tag}}
          el-form-item(label="所在施工单位战采（集采）库：" prop="constructionCollection")
            el-input(
              v-model="constructionCollection"
              ref="saveTagInput"
              placeholder="请输入所在施工单位战采（集采）库，输入完成按回车键添加"
              @keyup.enter.native="handleInputConfirm('constructionCollection')"
              @blur="handleInputConfirm('constructionCollection')"
            )
            .form-item-tags
              el-tag(:key="index" v-for="tag, index in form.constructionCollection" closable :disable-transitions="false" @close="handleClose(index, 'constructionCollection')") {{tag}}
          .form-row
            .form-col
              el-form-item(label="一般交货期：" prop="deliveryDay")
                el-input(placeholder="请输入一般交货期" v-model="form.deliveryDay" type="number")
                  .form-item-input_ft(slot="suffix") 天
          el-form-item(label="产品应用领域及主要客户简要介绍：")
            el-table(
              :data="form.customerList"
              border
              :header-cell-style="{ background: '#F8F7FC', fontSize: '14px', color: '#64698F' }"
            )
              el-table-column(label="客户名称")
                template(slot-scope="scope")
                  el-input(v-model="scope.row.customerName" placeholder="请输入客户名称")
              el-table-column(label="使用材料品种规格")
                template(slot-scope="scope")
                  el-input(v-model="scope.row.specification" placeholder="请输入使用材料品种规格")
              el-table-column(label="年订货额（万元）")
                template(slot-scope="scope")
                  el-input(v-model="scope.row.annualOrderAmount" placeholder="请输入年订货额" type="number")
            .el-table-button
              el-button(name="pink" @click="addCustomer") 添加
      .form-section
        .form-section-title 供应商生产概况
        .form-section-container
          el-form-item(label="人力资源情况：" prop="resources")
            el-table(
              :data="tableData"
              border
              :header-cell-style="{ background: '#F8F7FC', fontSize: '14px', color: '#64698F' }"
            )
              el-table-column(label="员工总人数")
                template(slot-scope="scope")
                  el-input(v-model="form.totalEmployees" placeholder="请输入员工人数" type="number" v-enter-number)
                    .form-item-input_ft(slot="suffix") 人
              el-table-column(label=" 管理人员人数")
                template(slot-scope="scope")
                  el-input(v-model="form.management" placeholder="请输入员工人数" type="number" v-enter-number)
                    .form-item-input_ft(slot="suffix") 人
              el-table-column(label=" 技术人员人数")
                template(slot-scope="scope")
                  el-input(v-model="form.technician" placeholder="请输入员工人数" type="number" v-enter-number)
                    .form-item-input_ft(slot="suffix") 人
              el-table-column(label=" 工人人数")
                template(slot-scope="scope")
                  el-input(v-model="form.worker" placeholder="请输入员工人数" type="number" v-enter-number)
                    .form-item-input_ft(slot="suffix") 人
          el-form-item(label="生产设备情况：" prop="productEquip")
            el-table(
              :data="tableData"
              border
              :header-cell-style="{ background: '#F8F7FC', fontSize: '14px', color: '#64698F' }"
            )
              el-table-column(label="设备总台（套）数")
                template(slot-scope="scope")
                  el-input(placeholder="请输入数值" v-model="form.totalEquipmentNumber" type="number" v-enter-number)
                    .form-item-input_ft(slot="suffix") 台（套）
              el-table-column(label=" 进口设备台（套）数")
                template(slot-scope="scope")
                  el-input(placeholder="请输入数值" v-model="form.importedEquipmentNumber" type="number" v-enter-number)
                    .form-item-input_ft(slot="suffix") 台（套）
              el-table-column(label="国产设备台（套）数")
                template(slot-scope="scope")
                  el-input(placeholder="请输入数值" v-model="form.domesticNumber" type="number" v-enter-number)
                    .form-item-input_ft(slot="suffix") 台（套）
          el-form-item(label="主要原材料名称及来源：" prop="materialOriginal")
            el-input(type="textarea" placeholder="请输入主要原材料名称及来源" v-model="form.materialOriginal" maxlength="500" show-word-limit)
          el-form-item(label="主要生产设备的名称、产地、价值：" prop="otherInformation")
            el-input(type="textarea" placeholder="请输入主要生产设备的名称、产地、价值" v-model="form.otherInformation" maxlength="500" show-word-limit)
          el-form-item(label="固定资产：" prop="fixedAssets")
            el-input(placeholder="请输入固定资产（原值）" v-model="form.fixedAssets" type="number")
              .form-item-input_ft(slot="suffix") 万元
          .form-row
            .form-col
              el-form-item(label="年生产产能：" prop="annualProductionCapacity")
                el-input(placeholder="请输入年生产产能" v-model="form.annualProductionCapacity" type="number")
                  .form-item-input_ft(slot="suffix") 万元
            .form-col
              el-form-item(label="新品研发能力：" prop="researchProductivity")
                el-radio-group(v-model="form.researchProductivity")
                  el-radio(v-for="item in dropDwon.researchProductivityList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
      .form-section
        .form-section-title 质量保证能力
        .form-section-container
          el-form-item(label="质量、职业健康安全、环境管理体系的认证：" prop="authentication")
            el-input(
              v-model="authentication"
              ref="saveTagInput"
              placeholder="请输入认证鉴定/认证试验以及认证机构，输入完成按回车键添加"
              @keyup.enter.native="handleInputConfirm('authentication')"
              @blur="handleInputConfirm('authentication')"
            )
            .form-item-tags
              el-tag(:key="index" v-for="tag, index in form.authentication" closable :disable-transitions="false" @close="handleClose(index, 'authentication')") {{tag}}
          el-form-item(label="工艺、质量文件：" prop="fileCompleted")
            el-radio-group(v-model="form.fileCompleted")
              el-radio(v-for="item in dropDwon.fileCompletedList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
          .form-row
            .form-col
              el-form-item(label="质检机构名称：" prop="inspectionOrganizationName")
                el-input(placeholder="请输入质检机构名称" v-model="form.inspectionOrganizationName")
            .form-col
              el-form-item(label="专职质量人员数：" prop="supplierQualificationNumber")
                el-input(placeholder="请输入专职质量人员数" v-model="form.supplierQualificationNumber" type="number" v-enter-number)
          el-form-item(label="主要检测试验设备情况：" prop="experimentNumber")
            el-table(
              :data="tableData"
              border
              :header-cell-style="{ background: '#F8F7FC', fontSize: '14px', color: '#64698F' }"
            )
              el-table-column(label="设备总台（套）数")
                template(slot-scope="scope")
                  el-input(placeholder="请输入数值" v-model="form.qualityTotalEquipmentNumber" type="number" v-enter-number)
                    .form-item-input_ft(slot="suffix") 台（套）
              el-table-column(label=" 进口设备台（套）数")
                template(slot-scope="scope")
                  el-input(placeholder="请输入数值" v-model="form.qualityImportedEquipmentNumber" type="number" v-enter-number)
                    .form-item-input_ft(slot="suffix") 台（套）
              el-table-column(label="国产设备台（套）数")
                template(slot-scope="scope")
                  el-input(placeholder="请输入数值" v-model="form.qualitySelfMadeEquipment" type="number" v-enter-number)
                    .form-item-input_ft(slot="suffix") 台（套）
              el-table-column(label="自制设备台（套）数")
                template(slot-scope="scope")
                  el-input(placeholder="请输入数值" v-model="form.qualityDomesticNumber" type="number" v-enter-number)
                    .form-item-input_ft(slot="suffix") 台（套）
          el-form-item(label="主要检测试验设备的名称、产地、价值：" prop="qualityOtherInformation")
            el-input(type="textarea" placeholder="请输入经营的产品品牌" v-model="form.qualityOtherInformation")
      .form-section
        .form-section-title 环境保护、社会责任、职业健康与安全体系
        .form-section-container
          el-form-item(label="是否通过质量管理体系认证：" prop="passedQualityCertification")
            el-radio-group(v-model="form.passedQualityCertification")
              el-radio(v-for="item in dropDwon.certificationList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
          el-form-item(label="相关报告及证书：" prop="certificationFileIds" v-if="form.passedQualityCertification == 1")
            .el-form-images
              .el-form-images-upload
                ali-upload(@getProgress="getProgress($event, 'qualityFileList')" @getFileInfo="getFileInfo($event, 'certificationFileIds')" multiple accept="image/*" :fileAgain="fileAgain" @getAgainProgress="getAgainProgress($event, 'qualityFileList')")
                  .el-form-upload_btn
                    .iconfont.el-icon-plus
                    .el-form-upload_btn-text 上传图片
                .upload-image(v-for="item, index in qualityFileList" :key="index")
                  img.upload-image-body(:src="item.fileSrc")
                  .upload-image-progress(v-if="item.progress < 100 && item.isSuccess != 2") {{item.progress}}%
                  .upload-image-progress(v-if="item.isSuccess == 2" @click="again(item)") 重新上传
                  .upload-image-close(v-if="item.isSuccess == 2 || item.progress == 100" @click="deleteFile(item, 'qualityFileList', 'certificationFileIds')")
                    .iconfont.el-icon-circle-close
        .form-section-container
          el-form-item(label="是否通过职业健康安全管理体系认证：" prop="passedHealthCertification")
            el-radio-group(v-model="form.passedHealthCertification")
              el-radio(v-for="item in dropDwon.certificationList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
          el-form-item(label="相关报告及证书：" prop="healthCertificationFileIds" v-if="form.passedHealthCertification == 1")
            .el-form-images
              .el-form-images-upload
                ali-upload(@getProgress="getProgress($event, 'healthFileList')" @getFileInfo="getFileInfo($event, 'healthCertificationFileIds')" multiple accept="image/*" :fileAgain="fileAgain" @getAgainProgress="getAgainProgress($event, 'healthFileList')")
                  .el-form-upload_btn
                    .iconfont.el-icon-plus
                    .el-form-upload_btn-text 上传图片
                .upload-image(v-for="item, index in healthFileList" :key="index")
                  img.upload-image-body(:src="item.fileSrc")
                  .upload-image-progress(v-if="item.progress < 100 && item.isSuccess != 2") {{item.progress}}%
                  .upload-image-progress(v-if="item.isSuccess == 2" @click="again(item)") 重新上传
                  .upload-image-close(v-if="item.isSuccess == 2 || item.progress == 100" @click="deleteFile(item, 'healthFileList', 'healthCertificationFileIds')")
                    .iconfont.el-icon-circle-close
        .form-section-container
          el-form-item(label="是否通过环境管理体系认证：" prop="passedEnvironmentCertification")
            el-radio-group(v-model="form.passedEnvironmentCertification")
              el-radio(v-for="item in dropDwon.certificationList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
          el-form-item(label="相关报告及证书：" prop="environmentCertificationFileIds" v-if="form.passedEnvironmentCertification == 1")
            .el-form-images
              .el-form-images-upload
                ali-upload(@getProgress="getProgress($event, 'environmentFileList')" @getFileInfo="getFileInfo($event, 'environmentCertificationFileIds')" multiple accept="image/*" :fileAgain="fileAgain" @getAgainProgress="getAgainProgress($event, 'environmentFileList')")
                  .el-form-upload_btn
                    .iconfont.el-icon-plus
                    .el-form-upload_btn-text 上传图片
                .upload-image(v-for="item, index in environmentFileList" :key="index")
                  img.upload-image-body(:src="item.fileSrc")
                  .upload-image-progress(v-if="item.progress < 100 && item.isSuccess != 2") {{item.progress}}%
                  .upload-image-progress(v-if="item.isSuccess == 2" @click="again(item)") 重新上传
                  .upload-image-close(v-if="item.isSuccess == 2 || item.progress == 100" @click="deleteFile(item, 'environmentFileList', 'environmentCertificationFileIds')")
                    .iconfont.el-icon-circle-close
      .form-section
        .form-section-title 相关证书资料
        .form-section-container
          el-form-item(label="营业执照（三证合一)：" prop="businessLicenseFileIds")
            .el-form-images
              .el-form-images-upload
                ali-upload(@getProgress="getProgress($event, 'businessFileList')" @getFileInfo="getFileInfo($event, 'businessLicenseFileIds')" multiple accept="image/*" :fileAgain="fileAgain" @getAgainProgress="getAgainProgress($event, 'businessFileList')")
                  .el-form-upload_btn
                    .iconfont.el-icon-plus
                    .el-form-upload_btn-text 上传图片
                .upload-image(v-for="item, index in businessFileList" :key="index")
                  img.upload-image-body(:src="item.fileSrc")
                  .upload-image-progress(v-if="item.progress < 100 && item.isSuccess != 2") {{item.progress}}%
                  .upload-image-progress(v-if="item.isSuccess == 2" @click="again(item)") 重新上传
                  .upload-image-close(v-if="item.isSuccess == 2 || item.progress == 100" @click="deleteFile(item, 'businessFileList', 'businessLicenseFileIds')")
                    .iconfont.el-icon-circle-close
        .form-section-container
          el-form-item(label="代理商（贸易商）需提供代理证书(可上传多张图片)：" prop="proxyCertificateFileIds")
            .el-form-images
              .el-form-images-upload
                ali-upload(@getProgress="getProgress($event, 'proxyFileList')" @getFileInfo="getFileInfo($event, 'proxyCertificateFileIds')" multiple accept="image/*" :fileAgain="fileAgain" @getAgainProgress="getAgainProgress($event, 'proxyFileList')")
                  .el-form-upload_btn
                    .iconfont.el-icon-plus
                    .el-form-upload_btn-text 上传图片
                .upload-image(v-for="item, index in proxyFileList" :key="index")
                  img.upload-image-body(:src="item.fileSrc")
                  .upload-image-progress(v-if="item.progress < 100 && item.isSuccess != 2") {{item.progress}}%
                  .upload-image-progress(v-if="item.isSuccess == 2" @click="again(item)") 重新上传
                  .upload-image-close(v-if="item.isSuccess == 2 || item.progress == 100" @click="deleteFile(item, 'proxyFileList', 'proxyCertificateFileIds')")
                    .iconfont.el-icon-circle-close
        .form-section-container
          el-form-item(label="请上传公司简介：" prop="companyFileIds")
            .el-form-body
              .el-form-upload
                ali-upload(@getProgress="getProgress($event, 'companyFileList')" @getFileInfo="getFileInfo($event, 'companyFileIds')" multiple accept=".doc,.docx,.pdf" :fileAgain="fileAgain" @getAgainProgress="getAgainProgress($event, 'companyFileList')")
                  el-button(name="pink") 选择附件
              .upload-info 支持格式： .doc .docx .pdf
              .file-item(v-for="item in companyFileList" :class="{ 'active': item.progress == 100 }")
                .file-item-name
                  .file-item-progress_line(:style="{ 'width': `${item.progress}%` }" v-if="item.progress < 100")
                  .iconfont.el-icon-document
                  span {{item.fileName}}
                .file-item-handles
                  .file-item-progress(v-if="item.progress < 100 && item.isSuccess != 2") {{item.progress}}
                  i.iconfont.el-icon-refresh-right(v-if="item.isSuccess == 2" @click="again(item)")
                  i.iconfont.el-icon-close(v-if="item.isSuccess == 2 || item.progress == 100" @click="deleteFile(item, 'companyFileList', 'companyFileIds')")
    .form-footer
      el-button(name="pink" @click="submit") 提交入库申请
  el-dialog(
    :visible.sync="successVisible"
    width="650px"
    @close="handleCloseVisible"
  )
    .dialog-body
      img(src="../../static/images/survey.png")
</template>

<script>
import { getDropDownList, getAddres, postSaveFile, supplierCheckIsExist, createSupplierStoragePage } from 'api'
import aliUpload from "@/components/customUpload";
export default {
  name: "survey",
  components: {
    aliUpload,
  },
  data () {
    var validateName = (rule, value, callback) => {
      if (value) {
        this.supplierCheckIsExist(rule, value, callback)
      } else {
        callback(new Error(rule.message))
      }
    }
    var validateAddress = (rule, value, callback) => {
      if (!this.form.province || !this.form.city || !this.form.area || !this.form.detailAddress) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    }
    var validatePhone = (rule, value, callback) => {
      let reg1 = /^1[0-9]\d{9}$/
      let reg2 = /^\d{3,4}\d{7,8}$/
      if (value === '') {
        callback(new Error(rule.message))
      } else {
        if (!reg1.test(value) && !reg2.test(value)) {
          callback(new Error(rule.message))
        }
        callback()
      }
    }
    var validateArray = (rule, value, callback) => {
      if (!this.form[rule.key].length) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    }
    var validResources = (rule, value, callback) => {
      let valid = rule.filters.every(filterKey => this.form[filterKey])
      if (!valid) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    }
    var validatePassed = (rule, value, callback) => {
      if (parseInt(this.form[rule.key]) === 1) {
        if (!this.form[rule.fileKey].length) {
          callback(new Error(rule.message))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    var validateFileList = (rule, value, callback) => {
      if (!this.form[rule.key].length) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    }
    return {
      successVisible: false,
      partyABrand: '',
      partyACollection: '',
      constructionBrand: '',
      constructionCollection: '',
      authentication: '',
      tableData: [{}],
      dropDwon: {
        certificationList: [],
        companyTypeList: [],
        fileCompletedList: [],
        generalTaxpayerList: [],
        inDepartmentList: [],
        needBillingList: [],
        productPositioningList: [],
        researchProductivityList: []
      },
      provinceDrop: [],
      cityDrop: [],
      areaDrop: [],
      manualFileList: [],
      qualityFileList: [],
      healthFileList: [],
      environmentFileList: [],
      businessFileList: [],
      proxyFileList: [],
      companyFileList: [],
      fileAgain: null,
      form: {
        companyName: '', // 供应商名称
        province: '', // 省
        city: '', // 市
        area: '', // 区
        detailAddress: '', // 详细地址
        mobile: '', // 	公司电话
        companyMail: '', // 公司邮箱
        companyUrl: '', // 	公司网址
        registeredFund: '', // 注册资金
        companyCreateDate: '', // 成立年月
        companyType: '', // 企业类型
        generalTaxpayer: '', // 是否为一般纳税人
        personsInChargeOfCompany: '', // 企业负责人
        personsInChargeOfCompanyPhone: '', // 企业负责人电话
        personsInChargeOfCompanyMail: '', // 企业负责人邮箱
        saleInChargeOfCompany: '', // 销售负责人
        saleInChargeOfCompanyPhone: '', // 销售负责人电话
        saleInChargeOfCompanyMail: '', // 销售负责人邮箱
        qualityInChargeOfCompany: '', // 质量负责人
        qualityInChargeOfCompanyPhone: '', // 质量负责人电话
        qualityInChargeOfCompanyMail: '', // 质量负责人邮箱
        headOfSales: '', // 业务联系人
        headOfSalesPhone: '', // 业务联系人电话
        headOfSalesMail: '', // 业务联系人邮箱
        supplierBrand: '', // 经营的产品品牌
        productIntroduce: '', // 主营产品介绍
        productManualList: [], // 产品手册文件Id
        productPositioning: [], // 产品定位（可多选）
        productTotalSale: '', // 企业年销售额
        businessCoverage: '', // 业务覆盖范围
        inDepartment: '', // 是否进入深圳市建筑工务署
        partyABrand: [], // 所在甲方品牌库
        partyACollection: [], // 所在甲方战采（集采）库
        constructionBrand: [], // 所在施工单位品牌库
        constructionCollection: [], // 所在施工单位战采（集采）库
        deliveryDay: '', // 一般交货期
        needBilling: '', // 是否需要开票（单选)
        customerList: [], // 产品应用领域及主要客户简要介绍
        totalEmployees: '', // 员工总人数
        management: '', // 管理人员人数
        technician: '', // 技术人员人数
        worker: '', // 工人人数
        fixedAssets: '', // 固定资产（原值）
        materialOriginal: '', // 主要原材料名称及来源
        totalEquipmentNumber: '', // 设备总台（套）数
        importedEquipmentNumber: '', // 进口设备台（套）数
        domesticNumber: '', // 国产设备台（套）数
        otherInformation: '', // 主要生产设备的名称、产地、价值
        annualProductionCapacity: '', // 年生产产能
        researchProductivity: '', // 新品研发能力 
        authentication: [], // 质量、职业健康安全、环境管理体系的认证
        fileCompleted: '', // 工艺、质量文件
        inspectionOrganizationName: '', // 质检机构名称
        supplierQualificationNumber: '', // 专职质量人员数
        qualityTotalEquipmentNumber: '', // 设备总台（套）数
        qualityImportedEquipmentNumber: '', // 进口设备台（套）数
        qualitySelfMadeEquipment: '', // 自制设备台（套）数
        qualityDomesticNumber: '', // 国产设备台（套）数
        qualityOtherInformation: '', // 主要检测试验设备的名称、产地、价值
        passedQualityCertification: '', // 是否通过质量管理体系认证
        passedHealthCertification: '', // 是否通过职业健康安全管理体系认证
        passedEnvironmentCertification: '', // 是否通过环境管理体系认证
        environmentCertificationFileIds: [], // 环境管理体系认证文件
        healthCertificationFileIds: [], // 职业健康安全管理体系认证文件
        certificationFileIds: [], // 质量管理体系认证文件
        businessLicenseFileIds: [], // 营业执照
        proxyCertificateFileIds: [], // 代理商（贸易商）需提供代理证书
        companyFileIds: [] // 公司简介
      },
      rules: {
        companyName: [
          { required: true, validator: validateName, message: '请输入公司全称！', trigger: 'blur' }
        ],
        companyAddress: [
          { required: true, validator: validateAddress, message: '请选择并输入完整地址！', trigger: 'change' }
        ],
        mobile: [
          { required: true, validator: validatePhone, message: '请输入公司电话！', trigger: 'blur' }
        ],
        companyMail: [
          { required: true, message: '请输入您的公司电子邮箱', trigger: 'blur' },
          { pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/, message: '电子邮箱格式错误', trigger: 'blur' },
        ],
        companyUrl: [
          { required: true, message: '请输入公司全称！', trigger: 'blur' }
        ],
        registeredFund: [
          { required: true, message: '请输入注册资金！', trigger: 'blur' }
        ],
        personsInChargeOfCompany: [
          { required: true, message: '请输入企业负责人！', trigger: 'blur' }
        ],
        personsInChargeOfCompanyPhone: [
          { required: true, validator: validatePhone, message: '请输入企业负责人电话！', trigger: 'blur' }
        ],
        personsInChargeOfCompanyMail: [
          { required: true, message: '请输入企业负责人邮箱！', trigger: 'blur' },
          { pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/, message: '邮箱格式错误', trigger: 'blur' },
        ],
        saleInChargeOfCompany: [
          { required: true, message: '请输入销售负责人！', trigger: 'blur' }
        ],
        saleInChargeOfCompanyPhone: [
          { required: true, validator: validatePhone, message: '请输入销售负责人电话！', trigger: 'blur' }
        ],
        saleInChargeOfCompanyMail: [
          { required: true, message: '请输入销售负责人邮箱！', trigger: 'blur' },
          { pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/, message: '邮箱格式错误', trigger: 'blur' },
        ],
        qualityInChargeOfCompany: [
          { required: true, message: '请输入质量负责人！', trigger: 'blur' }
        ],
        qualityInChargeOfCompanyPhone: [
          { required: true, validator: validatePhone, message: '请输入质量负责人电话！', trigger: 'blur' }
        ],
        qualityInChargeOfCompanyMail: [
          { required: true, message: '请输入质量负责人邮箱！', trigger: 'blur' },
          { pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/, message: '邮箱格式错误', trigger: 'blur' }
        ],
        headOfSales: [
          { required: true, message: '请输入业务联系人！', trigger: 'blur' }
        ],
        headOfSalesPhone: [
          { required: true, validator: validatePhone, message: '请输入业务联系人电话！', trigger: 'blur' }
        ],
        headOfSalesMail: [
          { required: true, message: '请输入业务联系人邮箱！', trigger: 'blur' },
          { pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/, message: '邮箱格式错误', trigger: 'blur' }
        ],
        supplierBrand: [
          { required: true, message: '请输入经营的产品品牌！', trigger: 'blur' },
        ],
        productIntroduce: [
          { required: true, message: '请输入主营产品介绍！', trigger: 'blur' },
        ],
        companyType: [
          { required: true, message: '请选择经营的产品品牌！', trigger: 'change' }
        ],
        generalTaxpayer: [
          { required: true, message: '请选择是否为一般纳税人！', trigger: 'change' }
        ],
        companyCreateDate: [
          { required: true, message: '请选择成立时间！', trigger: 'change' }
        ],
        productPositioning: [
          { required: true, message: '请选择产品定位！', trigger: 'change' }
        ],
        productTotalSale: [
          { required: true, message: '请输入企业年销售额！', trigger: 'blur' }
        ],
        businessCoverage: [
          { required: true, message: '请输入业务覆盖范围！', trigger: 'blur' }
        ],
        inDepartment: [
          { required: true, message: '请选择是否进入深圳市建筑工务署！', trigger: 'change' }
        ],
        partyABrand: [
          { required: true, validator: validateArray, message: '请输入所在甲方品牌库名称！', key: 'partyABrand', trigger: 'blur' }
        ],
        partyACollection: [
          { required: true, validator: validateArray, message: '请输入所在甲方战采（集采）库！', key: 'partyACollection', trigger: 'blur' }
        ],
        constructionBrand: [
          { required: true, validator: validateArray, message: '请输入所在施工单位品牌库名称！', key: 'constructionBrand', trigger: 'blur' }
        ],
        constructionCollection: [
          { required: true, validator: validateArray, message: '请输入所在施工单位战采（集采）库！', key: 'constructionCollection', trigger: 'blur' }
        ],
        deliveryDay: [
          { required: true, message: '请输入一般交货期！', trigger: 'blur' }
        ],
        needBilling: [
          { required: true, message: '请选择是否需要开票！', trigger: 'change' }
        ],
        resources: [
          { required: true, validator: validResources, filters: ['totalEmployees', 'management', 'technician', 'worker'], message: '请输入人力资源情况！', trigger: 'blur' }
        ],
        productEquip: [
          { required: true, validator: validResources, filters: ['totalEquipmentNumber', 'importedEquipmentNumber', 'domesticNumber'], message: '请输入生产设备情况！', trigger: 'blur' }
        ],
        materialOriginal: [
          { required: true, message: '请输入主要原材料名称及来源！', trigger: 'blur' }
        ],
        fixedAssets: [
          { required: true, message: '请输入固定资产（原值）！', trigger: 'blur' }
        ],
        otherInformation: [
          { required: true, message: '请输入主要生产设备的名称、产地、价值！', trigger: 'blur' }
        ],
        annualProductionCapacity: [
          { required: true, message: '请输入年生产产能！', trigger: 'blur' }
        ],
        researchProductivity: [
          { required: true, message: '请选择新品研发能力！', trigger: 'change' }
        ],
        authentication: [
          { required: true, validator: validateArray, message: '请输入请输入认证鉴定/认证试验以及认证机构！', key: 'authentication', trigger: 'blur' }
        ],
        fileCompleted: [
          { required: true, message: '请选择工艺、质量文件！', trigger: 'change' }
        ],
        inspectionOrganizationName: [
          { required: true, message: '请输入质检机构名称！', trigger: 'blur' }
        ],
        supplierQualificationNumber: [
          { required: true, message: '请输专职质量人员数！', trigger: 'blur' }
        ],
        passedQualityCertification: [
          { required: true, message: '请选择是否通过质量管理体系认证！', trigger: 'change' }
        ],
        certificationFileIds: [
          { required: true, validator: validatePassed, message: '请上传相关证书或证明！', key: 'passedQualityCertification', fileKey: 'certificationFileIds', trigger: 'blur' }
        ],
        passedHealthCertification: [
          { required: true, message: '请选择是否通过职业健康安全管理体系认证！', trigger: 'change' }
        ],
        healthCertificationFileIds: [
          { required: true, validator: validatePassed, message: '请上传相关证书或证明！', key: 'passedHealthCertification', fileKey: 'healthCertificationFileIds', trigger: 'blur' }
        ],
        passedEnvironmentCertification: [
          { required: true, message: '请选择是否通过环境管理体系认证！', trigger: 'change' }
        ],
        environmentCertificationFileIds: [
          { required: true, validator: validatePassed, message: '请上传相关证书或证明！', key: 'passedEnvironmentCertification', fileKey: 'environmentCertificationFileIds', trigger: 'blur' }
        ],
        productManualList: [
          { required: true, validator: validateFileList, message: '请上传相关证书资料！', key: 'productManualList', trigger: 'blur' }
        ],
        businessLicenseFileIds: [
          { required: true, validator: validateFileList, message: '请上传相关证书资料！', key: 'businessLicenseFileIds', trigger: 'blur' }
        ],
        proxyCertificateFileIds: [
          { required: true, validator: validateFileList, message: '请上传相关证书资料！', key: 'proxyCertificateFileIds', trigger: 'blur' }
        ],
        companyFileIds: [
          { required: true, validator: validateFileList, message: '请上传相关证书资料！', key: 'companyFileIds', trigger: 'blur' }
        ],
        experimentNumber: [
          { required: true, validator: validResources, filters: ['qualityTotalEquipmentNumber', 'qualityImportedEquipmentNumber', 'qualitySelfMadeEquipment', 'qualityDomesticNumber'], message: '请输入主要检测试验设备情况！', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async supplierCheckIsExist (rule, value, callback) {
      try {
        await this.$axios.post(supplierCheckIsExist, { axiosType: 'upload', companyName: value })
        callback()
      } catch (err) {
        rule.message = err.message || err.ResultSet.errors
        callback(new Error(rule.message))
      }
    },
    async getAddres (key = 'province', pushKey = 'provinceDrop', id = 0) {
      try {
        if (key !== 'area') {
          const { ResultSet } = await this.$axios.post(getAddres, { content: { id } })
          this[pushKey] = ResultSet.userData.getAddreList
        }
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    changeAddress (key, pushKey, ev) {
      if (key === 'province') {
        this.form.city = ''
        this.cityDrop = []
        this.form.area = ''
        this.areaDrop = []
      }
      if (key === 'city') {
        this.form.area = ''
        this.areaDrop = []
      }
      this.getAddres(key, pushKey, ev)
    },
    async getDropDownList () {
      try {
        const { ResultSet } = await this.$axios.post(getDropDownList)
        this.dropDwon = ResultSet.userData
      } catch(err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    getProgress (file, key) {
      this.setTempFileList(file, key)
    },
    getFileInfo (data, key) {
      this.form[key].push(...data)
    },
    setTempFileList (fileList, key) {
      fileList.forEach(item => {
        let index = this[key].findIndex(row => row.uid === item.uid)
        if (index > -1) {
          this[key][index] = item
        } else {
          this[key].push(item)
        }
      })
    },
    setItemFile (item, key) {
      let index = this[key].findIndex(row => row.uid === item.uid)
        if (index > -1) {
          this.$set(this[key], index, item)
        } else {
          this[key].push(item)
        }
    },
    again (item) {
      this.fileAgain = { ...item, isSuccess: 1 }
    },
    deleteFile (item, tempKey, formKey) {
      let tempIndex = this[tempKey].findIndex(row => row.uid === item.uid)
      let formIndex = this.form[formKey].findIndex(row => row.uid === item.uid)
      if (tempIndex > -1) {
        this[tempKey].splice(tempIndex, 1)
      }
      if (formIndex > -1) {
        this.form[formKey].splice(formIndex, 1)
      }
    },
    getAgainProgress (item, key) {
      this.fileAgain = null
      this.setItemFile(item, key)
    },
    handleClose (index, key) {
      this.form[key].splice(index, 1)
    },
    handleCloseVisible () {
      this.$router.go(0)
      this.successVisible = false
    },
    handleInputConfirm (key) {
      let inputValue = this[key]
      if (inputValue) {
        this.form[key].push(inputValue)
      }
      this[key] = ''
    },
    addCustomer () {
      this.form.customerList.push({
        customerName: '',
        specification: '',
        annualOrderAmount: ''
      })
    },
    submit () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) {
          this.$message.error('请仔细核对资料填写是否正确！')
        } else {
          try {
            let query = { ...this.form }
            if (query.productPositioning) query.productPositioning = query.productPositioning.join(',')
            await this.$axios.post(createSupplierStoragePage, { axiosType: 'upload', ...query })
            this.successVisible = true
            this.$message.success('提交成功，请等待工作人员审核！')
          } catch (err) {
            this.$message.error(err.message || err.ResultSet.errors)
          }
        }
      })
    },
  },
  beforeRouteEnter (to, from, next) {
    next(async vm => {
      await vm.getAddres()
      vm.getDropDownList()
    })
  }
};
</script>

<style lang="scss">
.survey {
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>

<style lang="scss" scoped>
.survey {
  min-height: 100vh;
  min-width: 1600px;
  
  background: #E5E5E5;
}
.survey-title {
  font-size: 36px;
  line-height: 20px;
  color: #000000;
  padding: 75px 0;
  text-align: center;
}
.survey-container {
  width: 1600px;
  padding: 22px 22px 160px;
  background: #fff;
  margin: 0 auto;
}
.survey-form-title {
  padding: 3px 0 23px;
  font-size: 18px;
  line-height: 26px;
  color: #3E4373;
  border-bottom: 1px solid #EDEDED;
}
.form-section-title {
  position: relative;
  margin-top: 32px;
  padding-left: 12px;
  font-size: 18px;
  line-height: 26px;
  color: #B2B4C7;
  z-index: 1;
  &:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 4px;
    height: 10px;
    background: #B2B4C7;
    border-radius: 8px;
    z-index: 1;
  }
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #EDEDED;
    top: 50%;
    left: 210px;
    transform: translateY(-50%);
  }
}
.form-section {
  overflow: hidden;
}
.form-section-container {
  margin-top: 16px;
  background: #F6F6F9;
  padding: 25px 22px;
  .el-form-item__label {
    max-width: 200px;
  }
}
.form-item-flex {
  display: flex;
  align-items: center;
}
.form-item-address {
  width: 300px;
  margin-right: 5px;
  & .el-select {
    width: 100%;
  }
}
.form-item-address_input {
  flex: 1;
}
.form-row {
  display: flex;

}
.form-col {
  flex: 1;
  .el-select {
    width: 100%;
  }
}
.el-form-body {
  padding: 15px;
  background: #fff;
  border-radius: 4px;
}
.el-form-upload {
  display: inline-block;
}
.form-item-input_ft {
  padding: 0 10px;
  color: #000;
  line-height: 32px;
}
.form-item-tags {
  margin-top: 15px;
}
.el-table-button {
  margin-top: 10px;
}
.upload-info {
  margin-top: 8px;
  font-size: 12px;
  line-height: 18px;
  color: #909399;
}
.file-item {
  display: flex;
  align-items: center;
  padding: 8px 4px;
  border-radius: 4px;
  border: 1px solid #fff;
  &.active {
    &:hover {
      background: #FEF0F0;
      border: 1px solid #FDE2E2;
    }
  }
  .file-item-name {
    position: relative;
    flex: 2;
    span {
      display: inline-block;
      margin-left: 10px;
    }
    .file-item-progress_line {
      position: absolute;
      width: 100%;
      height: 2px;
      background: #409EFF;
      bottom: 0;
      left: 0;
      border-radius: 0 0 20px 20px;
    }
  }
}
.file-item-progress {
  display: flex;
  justify-content: flex-end;
  width: 150px;
}
.file-item-handles {
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .iconfont {
    margin-left: 10px;
    font-size: 20px;
  }
}
.el-form-images-upload {
  display: flex;
  flex-wrap: wrap;
}
.upload-image {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, .2);
  border-radius: 4px;
  position: relative;
  .upload-image-body {
    max-width: 100%;
    max-height: 100%;
  }
  .upload-image-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }
  .upload-image-close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    line-height: 1;
    cursor: pointer;
    .iconfont {
      font-size: 20px;
      color: #FF708B;
    }
  }
}
.el-form-upload_btn {
  width: 100px;
  height: 100px;
  background: #fff;
  border: 1px dashed #DCDFE6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-bottom: 10px;
  .iconfont {
    font-size: 16px;
    color: #B2B4C7;
  }
  .el-form-upload_btn-text {
    margin-left: 3px;
    font-size: 12px;
    color: #B2B4C7;
  }
}
.form-footer {
  margin-top: 60px;
  text-align: center;
}
.dialog-body {
  width: 560px;
  height: 410px;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>